<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/assets/css/admin.css">
    <title>${(shop.name)!''}预约</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="/assets/js/amazeui.ie8polyfill.min.js"></script>
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/amazeui.min.js"></script>
    <script src="/assets/js/app.js"></script>
    <link rel="stylesheet" href="/weui/weui.css"/>
    <link rel="stylesheet" href="/weui/example.css"/>
    <script src="/weui/zepto.min.js"></script>
    <!--<script src="/weui/example.js"></script>-->
    <link rel="stylesheet" href="/layer/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="/layer/css/layui.css">

    <!--<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">-->


</head>
<script>
    $(function () {
        var startDate = new Date(2014, 11, 20);
        var endDate = new Date(2024, 11, 25);
        var $alert = $('#my-alert');
        var today = ${today}
                $('#my-start').datepicker().
                        on('changeDate.datepicker.amui', function (event) {
                            if (event.date.valueOf() < today) {
//                                $alert.find('p').text('预约不能早于今天哦！').end().show();
                                $('#my-start')[0].focus();
                                layer.msg('预约不能早于今天哦！');
                                document.getElementById("my-start").value = "${todayDate}";
                            } else {
                                $alert.hide();
                                startDate = new Date(event.date);
                                $('#my-startDate').text($('#my-start').data('date'));
                                window.location.href = "index?shopId=${shopId}&itemId=${itemId}&selectionId=${selectionId}&dateNumber=" + event.date.valueOf();
                            }
                        });
    });
</script>

<body>
<header data-am-widget="header"
        class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
    </div>

    <h1 class="am-header-title">
        <a href="#title-link" class="">${(shop.name)!''}预约</a>
    </h1>

    <div class="am-header-right am-header-nav">
    </div>
</header> 
<div class=" am-slider am-slider-default
    " data-am-flexslider id="demo-slider-0" hidden>
    <ul class="am-slides">
        <li><img src="http://obyg8ilnz.bkt.clouddn.com/16df442d-f53e-40d3-8f50-d79839d8eaf8-s2"/></li>
        <!--<li><img src="http://obyg8ilnz.bkt.clouddn.com/55c74d52-2aac-4ebb-b91c-0357a5cf2306-s2"/></li>-->
        <li><img src="http://obyg8ilnz.bkt.clouddn.com/8eb2e275-2d28-473b-8df3-128ceabe7e8a-s2"/></li>
        <li><img src="http://obyg8ilnz.bkt.clouddn.com/939dcc1e-7d6f-4189-b300-85479507ca73-s2"/></li>
    </ul>
</div>
<div style="padding: 10px;padding-bottom: 30px;">

    <div class="am-hide-lg-only">
        <form class="am-form" action="index" id="dateform">

            <div hidden>
                <#if shopId??>
                    <input type="text" name="shopId" value="${shopId}" hidden/>
                </#if>

                <#if selectionId??>
                    <input type="text" name="selectionId" value="${selectionId}" hidden/>
                </#if>
                <#if itemId??>
                    <input type="text" name="itemId" value="${itemId}" hidden/>
                </#if>
                <#if time??>
                    <input type="text" name="bookTime" value="${time}" hidden/>
                </#if>
            </div>

            <div class="am-form-group">
                <label for="doc-select-1">预约日期</label>
                <select id="doc-select-1" form="dateform" type="submit" name="date" onChange="submit()">
                    <#list dates as dateValue>
                        <#if (date = dateValue)>
                            <option selected value="${dateValue}" name="date" class="am-selected">${dateValue}
                            </option>
                        </#if>
                        <#if (date != dateValue)>
                            <option value="${dateValue}" name="date" class="am-selected">
                                ${dateValue}
                            </option>
                        </#if>
                    </#list>
                </select>
                <span class="am-form-caret"></span>
            </div>
        </form>
    </div>

    <div class="am-show-lg-only">
        <p>预约日期:<input type="text" class="am-form-field" placeholder="${date}" id="my-start"
                       readonly/>
        </p>
    </div>


    <#if shops??>
        <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
        <ul class="am-avg-sm-4 am-thumbnails">
            <#list shops as item>
                <li>
                    <#assign selected=false/>
                    <#if item.id=shopId>
                        <#assign selected=true/>
                    </#if>
                    <#assign itemTitle='${item.name}'/>
                    <a href="index?shopId=${item.id}&date=${date}">
                        <div>
                            <#if selected>
                                <button type="button" class="am-btn am-btn-success am-btn-block">${itemTitle}
                                </button>
                            </#if>
                            <#if !selected>
                                <button type="button" class="am-btn am-btn-default am-btn-block">${itemTitle}
                                </button>
                            </#if>
                        </div>
                    </a>

                </li>
            </#list>
        </ul>
    </#if>


    <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
    <ul class="am-avg-sm-4 am-thumbnails">
        <#list items as item>
            <li>
                <#assign selected=false/>
                <#if item.id=itemId>
                    <#assign selected=true/>
                </#if>
                <#assign itemTitle='${item.name}'/>
                <a href="index?shopId=${shopId}&itemId=${item.id}&selectionId=${selectionId}&date=${date}">
                    <div>
                        <#assign spendTime = '需要约'+item.spend * 0.5 + '小时' />
                        <#if selected>
                            <button type="button" class="am-btn am-btn-success am-btn-block"
                                    data-am-popover="{content: '${spendTime}', trigger: 'hover focus'}">${itemTitle}
                            </button>
                        </#if>
                        <#if !selected>
                            <button type="button" class="am-btn am-btn-default am-btn-block"
                                    data-am-popover="{content: '${spendTime}', trigger: 'hover focus'}">${itemTitle}
                            </button>
                        </#if>
                    </div>
                </a>

            </li>
        </#list>
    </ul>
    <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
    <ul class="am-avg-sm-3 am-avg-md-4 am-avg-md-8 am-thumbnails">
        <#list selections as selection>
            <#assign selected=false/>
            <#if selection.id=selectionId>
                <#assign selected=true/>
            </#if>
            <li>
                <div>
                    <a href="index?shopId=${shopId}&itemId=${itemId}&selectionId=${selection.id}&date=${date}"
                       type="button" class="am-btn-default">
                        <#assign selectionName = selection.name/>
                        <#if selected>
                            <div class="" style="border-width: 5px;border-color: #3d9933;border-style: solid">
                                <img class="am-img-responsive am-radius am-img-thumbnail" src="${selection.image!}"/>

                                <div class="am-text-center am-text-primary am-text-sm">${selectionName}</div>
                            </div>
                        </#if>
                        <#if !selected>
                            <div class="" style="">
                                <img class="am-img-responsive am-radius am-img-thumbnail" src="${selection.image!}"/>

                                <div class="am-text-center am-text-primary am-text-sm">${selectionName}</div>
                            </div>
                        </#if>
                    </a>
                </div>
            </li>
        </#list>
    </ul>
    <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
    <#if times?size=0>
        <div class="am-g">
            <div class="am-btn-block">
                <h1 class="am-text-center">暂无可预约时间</h1>
            </div>
        </div>
    </#if>
    <ul class="am-avg-sm-3 am-avg-md-5 am-avg-lg-8 am-thumbnails">
        <#list times as time>
            <li>
                <#if (time.flag)>
                    <a href="index?shopId=${shopId}&itemId=${itemId}&selectionId=${selectionId}&time=${time.index}&date=${date}">
                        <#if (time.selected)>
                            <button type="button" class="am-btn am-btn-success am-btn-block">${time.time}
                                <div hidden>
                                    <i class="weui_icon_success_no_circle" hidden></i>
                                </div>
                            </button>
                        </#if>
                        <#if !(time.selected)>
                            <button type="button" class="am-btn am-btn-secondary am-btn-block">${time.time}</button>
                        </#if>
                    </a>
                </#if>
                <#if !(time.flag)>
                    <button type="button" class="am-btn am-btn-default am-btn-block" disabled="disabled">${time.time}
                    </button>
                </#if>
            </li>
        </#list>
    </ul>
    <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
    <div class="am-text-center am-text-lg">
        <ol class="am-breadcrumb">
            <li><p>您已选择</p></li>
            <li>${date}</li>
            <li>${(timeString)!'未选择时间'}</li>
            <li>${shop.name}</li>
            <li>${itemName}</li>
            <li>${realSelectionName}</li>
        </ol>
    </div>

    <form action="bookConfirm" method="get" onsubmit="return checkValue();">

        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">姓名</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="nameField" class="weui_input" type="text" name="bkBooking.name" placeholder="请输入客人姓名"/>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">电话</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="mobileField" class="weui_input" type="number" name="bkBooking.phone" pattern="[0-9]*"
                           placeholder="请输入客人电话" minlength="11" required/>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">备注</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="markField" class="weui_input" type="text" name="bkBooking.remark"
                           placeholder="请输入备注(选填)"/>
                </div>
            </div>
        </div>
        <div hidden>
            <input type="text" name="bkBooking.shopId" value="${(shopId)!''}"  />
            <input type="text" name="bkBooking.selectionId" value="${(selectionId)!''}" />
            <input type="text" name="bkBooking.itemId" value="${(itemId)!''}"  />
            <input type="text" name="bkBooking.bookTime" value="${(time)!''}"  />
            <input type="text" name="bkBooking.bookDay" value="${(date)!''}"  />
        </div>
        </br>
        <input class="weui_btn weui_btn_primary" type="submit" value="提交">
    </form>


    <div class="am-hide-lg-only">
        <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
        <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default "
             id="">
            <ul class="am-navbar-nav am-cf am-avg-sm-4">
                <li>
                    <a href="tel:13631290232" class="">
                        <span class="am-icon-phone"></span>
                        <span class="am-navbar-label">联系我</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    $(function () {
        var nowTemp = new Date();
        var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
        var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
        var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
        var $myStart2 = $('#my-start-2');

        var checkin = $myStart2.datepicker({
            onRender: function (date, viewMode) {
                // 默认 days 视图，与当前日期比较
                var viewDate = nowDay;

                switch (viewMode) {
                    // moths 视图，与当前月份比较
                    case 1:
                        viewDate = nowMoth;
                        break;
                    // years 视图，与当前年份比较
                    case 2:
                        viewDate = nowYear;
                        break;
                }

                return date.valueOf() < viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function (ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.setValue(newDate);
            }
            checkin.close();
        }).data('amui.datepicker');

    });

    function checkValue() {

        // alert(UE.getEditor('editor').getAllHtml())
        var name = document.getElementById("nameField").value
        var mobile = document.getElementById("mobileField").value

        if (name == "") {
            // alert('请填写预约客人姓名');
            layer.msg('请填写预约客人姓名');
            return false
        }

        if (mobile == "") {
            // alert('请填写预约客人电话');
            layer.msg('请填写预约客人电话');
            return false
        }
        else {
            return true
        }
    }

</script>
</body>
</html>